<template>
  <div class="v-checklist" @change="$emit('change', currentValue)">
    <div class="v-checklist-title" v-if="title">{{title}}</div>
    <label
      class="v-checklist-item"
      v-for="option in options"
      :key="option.value || option"
    >
      <span class="v-checkbox">
        <input
          class="v-checkbox-input"
          type="radio"
          v-model="currentValue"
          :disabled="option.disabled"
          :value="option.value || option"
          :name="name"
        >
        <span class="v-checkbox-check"></span>
      </span>
      <span class="v-checkbox-label" v-text="option.label || option"></span>
    </label>
  </div>
</template>
<script>
export default {
  name: 'radiolist',
  props: {
    name: {
      type: String,
      required: true,
    },
    title: String,
    value: [String, Number],
    options: {
      type: Array,
      required: true,
    },
  },
  created() {
    console.log(typeof this.value)
  },
  data() {
    return {
      currentValue: this.value || '',
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },

    currentValue(val) {
      this.$emit('input', val)
    },
  },
}
</script>

